<!-- 开票员密码校验 -->
<template>
  <div class="password-verifiers-con">
    <div class="item-row tip"><a-icon type="warning" style="margin: 0 10px;"/>停用后，下列企业无绑定的内部员工，请重新分配开票员！</div>
    <div class="item-row form">
      分配开票员：{{form.user}}
    </div>
    <div class="item-row">
      <a-table
        :columns="columns"
        :data-source="tableData"
        style="width: 100%;"
        bordered
        :scroll="{y:400}"
      >
        <span slot="pwd" slot-scope="text, record">
          <a-input :disabled="record.pwd.disabled" v-model="record.pwd.val" placeholder="请输入密码" style="width: 100px;" />
        </span>
        <div slot="action" slot-scope="text, record" style="text-align: left;">
          <!-- <a-tag :color="tagConfig[record.action.state].color">{{tagConfig[record.action.state].label}}</a-tag> -->
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{record.action.msg||''}}</span>
            </template>
            <a-tag :color="tagConfig[record.action.state].color">{{tagConfig[record.action.state].label}}</a-tag>
          </a-tooltip>
          <!-- <a-button v-if="record.action.isEdit" type="link" @click="editEvent(record)"> 修改 </a-button>
          <a-button v-if="record.action.isDelete" type="link" @click="deleteEvent(record)"> 删除 </a-button> -->
        </div>
      </a-table>
      </div>
    <div class="item-row btn-group">
      <a-button type="" @click.prevent="goBackEvent" style="margin: 0 5px;">返回一步 </a-button>
      <a-button type="primary" @click.prevent="nextEvent" style="margin: 0 5px;">校验密码 </a-button>
    </div>
  </div>
</template>

<script>
import getDataDB from '@/api/InvoiceIssuer.js'
import tableConfig from './utils/tableConfig'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'PasswordVerifiers',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      tableData: [],
      columns:tableConfig('PasswordVerifiers'),
      tagConfig:{ '0':{color:'',label:'待校验'},'1':{color:'#87d068',label:'校验成功'},'2':{color:'#f50',label:'校验失败'},'-1':{color:'orange',label:'校验中'}},
      form:{
        user:''
      },
      kpyInfo:{},
      oldkpyinfo: {},
      optionList:[
        {label: '暂不设置', value: '0'},
        {label: '测试1', value: '1'},
        {label: '测试2', value: '2'},
        {label: '测试3', value: '3'},
      ]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
       if (!this.isType.isNullOrUnDef(val) && !this.isType.isEmpty(val)) {
        this.form.user = val.user.name
        this.kpyInfo = val.user
        this.oldkpyinfo = val.oldKPY
        this.setTableData(val.table)
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    setTableData(dataList){
      const tempArr = []
      dataList.forEach(item=>{
        tempArr.push({...item,pwd:{ val:"", disabled:false}, action:{state:'0', isEdit:false, isDelete: false}})
      })
      this.tableData = tempArr
    },

    VerifyPasswordEvent() {
      // 全部校验成功后显示 提交企业 按钮
      const param = []
      let isHas = true
      this.tableData.forEach(item=>{
        // state 0 未校验  1 校验成功  2 校验失败
        let disabled = true
        let state = '-1'
        if(item.action.state == '-1' || item.action.state == '0'|| item.action.state == '2'){
          if(this.isType.isEmpty(item.pwd.val)){
            isHas = false
            disabled = false
            state = '0'
          }
          param.push({
            idCard:this.data.oldKPY.idCard,
            entId:item.entId,
            password: item.pwd.val,
            phone:this.data.oldKPY.phone,
            source:'2', // 管理端  2   企业端 1
            type: '2'
          })
        }
        item.pwd.disabled = disabled
        item.action.state = state
      })
      if(isHas == false) {
        this.$message.warning('密码不能为空')
        return false
      }
      const tempTable = this.tableData.map(item => {
        return {
          "entId": item.entId,
          "parentId": this.kpyInfo.id,
          "password": item.pwd.val,
          "phone": this.kpyInfo.phone,
          "source": "2", // 管理端 2  企业端  1
          "type": '2'
        }
      })
      const tempoldkpyinfo = this.oldkpyinfo
      console.log('校验电子税务局密码 + 响应数组结果 param===========>',param);
      getDataDB('校验电子税务局密码 + 响应数组结果',param).then(res=>{
        // console.log('校验电子税务局密码 + 响应数组结果===========>', res, tempTable);
        // this.isVerifyPassword = true
        if (res.success== true){
          const tempArr = [...this.tableData]
          let isverify = true
          res.result.forEach(r_ => {
            const {entId, verify, message} = r_
            tempArr.forEach(item => {
              if(item.entId == entId){
                item.action.state = verify=== true ? '1' : '2'
                item.action.msg = message
                item.pwd.disabled = verify
                // item.action.isEdit = !verify
                // item.action.isDelete = !verify
                if (!verify) {
                  isverify = false
                }
              }
            })
          })
          this.tableData = tempArr
          if (isverify == true) {
            const param_ = {
              "bizNo": tempoldkpyinfo.channelId,
              "bizType":tempoldkpyinfo.bizType,
              "id": tempoldkpyinfo.id,
              "idCard":  tempoldkpyinfo.idCard,
              "list": tempTable,
              "name": tempoldkpyinfo.name,
              "phone": tempoldkpyinfo.phone,
              // "source": '2',
              // "type": ''
            }
            getDataDB('停用开票人',param_).then(res => {
              if (res.success == true) {
                this.closeEvent(false,{type:'pv-next', data: {}})
              } else {
                this.$message.warning(res.message)
              }
            })
          }
          console.log('===========isverify==========================>',isverify);
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    // 密码校验
    nextEvent(){
      this.VerifyPasswordEvent()
      // this.closeEvent(false,{type:'pv-next', data: {}})
    },
    goBackEvent(){
      this.closeEvent(false,{type:'pv-goback', data: this.data})
    },
  },
  }
</script>
<style lang='less'>
.password-verifiers-con{
  width: 100%;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction: column;
  // padding: 10px 0;
  box-sizing: border-box;

  .item-row{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    margin: 5px 0;
    &.tip{
      color: #E6A23C;
    }
    &.btn-group{
      justify-content:center;

    }
    &.form{

    }
  }
}
</style>

